Defront — про фронтенд-разработку и не только

Алексей Трехлеб из Uber написал статью про изменение размера изображения с помощью алгоритма Seam Carving — "Изменение размеров изображения с учётом его содержимого в JavaScript".

Основная идея алгоритма Seam Carving заключается в изменении размера изображения с сохранением пропорций объектов изображения с помощью удаления "швов" — последовательности смежных пикселей с наименьшей энергией, идущих от одного края изображения к другому. Пикселем с наименьшей энергией считается такой пиксель, который очень похож на свои соседние пиксели. Для вычисления этой метрики используется формула:

const lEnergy = (lR-mR) ** 2 + (lG-mG) ** 2 + (lB-mB) ** 2;
const rEnergy = (rR-mR) ** 2 + (rG-mG) ** 2 + (rB-mB) ** 2;
const result = Math.sqrt(lEnergy + rEnergy);

Алгоритм лучше всего работает с ландшафтными изображениями с большими областями одного тона. На более сложных изображениях он может привести к искажениям.

Крутая статья. Очень рекомендую почитать.

#algorithm

https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/
https://vas3k.club/post/9637/ (на русском языке)

trekhleb.dev

Content-aware image resizing in JavaScript | Trekhleb

JavaScript implementation of so-called Seam Carving algorithm for the content-aware image resizing and objects removal. Dynamic programming approach is applied to optimize the resizing time.

www.tg-me.com/hk/Defront при поддержке Зарплата ру — про фронтенд разработку и не только/com.defront/905

3.6K viewsAlexander Myshov, edited Apr 26, 2021 at 06:02

tg-me.com/defront/905

Create: 2021-04-26
Last Update: 2025-06-26 07:08:48

const lEnergy = (lR-mR) ** 2 + (lG-mG) ** 2 + (lB-mB) ** 2;
const rEnergy = (rR-mR) ** 2 + (rG-mG) ** 2 + (rB-mB) ** 2;
const result = Math.sqrt(lEnergy + rEnergy);

BY Defront — про фронтенд-разработку и не только

Share with your friend now:
tg-me.com/defront/905

Defront при поддержке Зарплата ру — про фронтенд разработку и не только Telegram | DID YOU KNOW?

Telegram Be The Next Best SPAC